<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>在组件中处理事件5</title>
  <script type="text/javascript" src="vue.js"></script>
</head>
<body>
  <div id="app">
    <greeting to="Mike" v-on:click="onClick">Love</greeting>
    <greeting to="Jane">Like</greeting>
  </div>
  
  <script>
    let greetingComponent = {
      data: function () {
        return {
          count: 0
        }
      },
      props:['to'],
      methods:{
        onClick(){
          this.count++;
          this.$emit('click', this.count);
        }
      },
      template: '<button v-on:click="onClick"><slot></slot> {{to}} x {{ count }}</button>'
    };

    let vm = new Vue({
      el: "#app",
      methods:{
        onClick: function(count){
          alert("已经点击了"+count+"次");
        } 
      },
      components:{
        greeting: greetingComponent,
      }
    })
  </script>
</body>
</html>